<script lang="ts">
import { RangeMonth } from '~/components-business/range';
// import { valueOfRangePickerProps } from '~comp/antd-assist';
import { Skeleton } from '~/components/skeleton';
import CampaignItem from './CampaignItem.vue';
import CampaignTable from './CampaignTable.vue';

const [setEle, eleBp] = useElementBreakpoint({});
function useTableList() {
  const [campaignsListQry, campaignsListParams] = useFilterPaginationQuery(apis.apiInviteChannel, {
    page_size: { value: 10 },
    // start_time: { value: dayjs().startOf('month').valueOf(), responsive: true },
    // end_time: { value: dayjs().endOf('month').valueOf(), responsive: true },
    start_time: {
      value: dayjs().startOf('month').utc(true).valueOf(),
      responsive: true,
    },
    end_time: {
      value: dayjs().endOf('month').utc(true).valueOf(),
      responsive: false,
    },
  });
  const listData = computed(() => campaignsListQry?.data?.value?.list ?? []);
  const total = computed(() => campaignsListQry?.data?.value?.pagination.total ?? 0);

  return {
    listData,
    total,
    campaignsListQry,
    campaignsListParams,
  };
}
</script>

<script setup lang="ts">
const { campaignsListQry, campaignsListParams, listData, total } = useTableList();
</script>

<template>
  <div>
    <TCard :ref="setEle">
      <template #header>
        <div class="w-full gap-2" :class="{ 'text-left': eleBp.lt3xl, 'flex items-center justify-between w-full': eleBp['3xl'] }">
          <div class="flex items-center gap-2">
            <span class="text-xl">{{ $t('bbxUw0yzeO8kSy4rViCcL') }}</span>
            <span class="inline-block rounded bg-green/20 px-3 py-1 text-xs text-green">{{ total }}/20</span>
          </div>
          <div class="grid grid-cols-2 mt-3 gap-2 !self-stretch">
            <!-- <ARangePicker
              v-bind="valueOfRangePickerProps(campaignsListParams)"
              class="ant-cover__RangePicker-3d-gray" :class="{ 'w-40': eleBp['4xl'] }"
              inputReadOnly :bordered="false" format="MM-DD"
            /> -->
            <RangeMonth
              v-model:startTime="campaignsListParams.start_time"
              v-model:endTime="campaignsListParams.end_time" :bordered="false"
              size="small" :virtual="false" :class="{ 'w-40': eleBp['4xl'] }"
            />

            <AButton
              class="ant-cover__Button-3d-primary !h-10" :class="{ 'w-40': eleBp['4xl'] }" type="primary" size="small" block
              @click="globalPopups.addCampaign.open()"
            >
              {{ $t('eZs0JXngVkl_71sNxkzWi') }}
            </AButton>
          </div>
        </div>
      </template>

      <TSuspenseView v-bind="buildSvPropsOfQuery(campaignsListQry)" errorClass="min-h-40" outRender>
        <div v-if="eleBp.lt4xl">
          <CampaignItem v-for="item in listData" :key="item.channel_id" :info="item" />
        </div>
        <div v-if="eleBp['4xl']">
          <CampaignTable :info="listData" />
        </div>

        <template #pending>
          <div v-if="eleBp.lt4xl">
            <Skeleton v-for="i in 3" :key="i" class="grid grid-cols-2 w-full gap-2">
              <Skeleton type="rect" height="15px" width="30px" class="col-span-full" />
              <Skeleton type="rect" height="15px" width="100px" class="col-span-full" />
              <Skeleton
                v-for="k in 6"
                :key="k"
                type="rect"
                height="15px"
              />
              <ADivider class="col-span-full" />
            </Skeleton>
          </div>
          <TTableLoading v-if="eleBp['4xl']" />
        </template>
      </TSuspenseView>
    </TCard>

    <TPagination
      v-model:page="campaignsListParams.page" v-model:pageSize="campaignsListParams.page_size" :querier="campaignsListQry"
      class="mt-2"
    />
  </div>
</template>
